<template>
  <div>
    <img
      width="300"
      height="500"
      v-for="item in imageList"
      :key="item"
      v-lazy-load="item"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import type { Directive } from "vue";

const images: Record<string, { default: string }> = import.meta.glob(
  "../assets/images/*",
  { eager: true }
);

const imageList = Object.keys(images).map((key) => images[key].default);

const vLazyLoad: Directive<HTMLImageElement, string> = async (el, binding) => {
  const def = await import("../assets/logo.svg")  // as any as string;

  el.src = def.default;
  const observer = new IntersectionObserver(
    (enr)=>{
      console.log(enr[0],binding);
      if (enr[0].intersectionRatio>0) {
          el.src = binding.value;
          // 停止监听 
          observer.unobserve(el);
      }
    }
  )
  observer.observe(el);
};
</script>

<style lang="scss" scoped></style>
